<template>
  <div class="bottpmNav">
    <van-tabbar v-model="active">
    <van-tabbar-item icon="shopping-cart-o" @click="jumpToHome">外卖</van-tabbar-item>
    <van-tabbar-item icon="search" @click="jumpToSearchFood">搜索</van-tabbar-item>
    <van-tabbar-item icon="description" @click="jumpToOrder">订单</van-tabbar-item>
    <van-tabbar-item icon="contact" @click="jumpToMy">我的</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name:'bottomNav',
    data() {
    return {
      active: 0,
    };
  },
  created(){
    this.active=this.bottomActive
  },
  methods:{
    //底部显示的编号
    // 跳转到外卖首页
    jumpToHome(){
        this.active=0;
      this.$store.commit('getBottomActive', this.active);
      this.$router.push({
        name:'home'
      })
    },
    // 跳转到搜索页
    jumpToSearchFood(){
      this.active=1;
      this.$store.commit('getBottomActive', this.active);
      this.$router.push({
        name:'searchFood',
      })
    },
    // 跳转到订单
    jumpToOrder(){
        this.active=2;
      this.$store.commit('getBottomActive', this.active);
      this.$router.push({
        name:'order'
      })
    },
    // 跳转到我的
    jumpToMy(){
        this.active=3;
      this.$store.commit('getBottomActive', this.active);
      this.$router.push({
        name:'my'
      })
    },
  },
    computed: {
    ...mapState(["bottomActive"]),
  },
}
</script>

<style scoped>
    .bottpmNav >>> .van-tabbar-item__text{
        font-size: .1rem;
    }
    .bottpmNav>>>.van-tabbar-item__icon{
        font-size: .08rem;
    }
</style>